<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/courseOutline' }">
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/questionBank' }">
        CFA题库
      </el-breadcrumb-item>
      <el-breadcrumb-item>查看报告</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="testProbably">
      <h5 class="tit">Learning Module 2 The Time Value of Money in Finance</h5>
      <div class="progressMain">
        <div class="testCorrect">
          <div class="progressBox">
            <el-progress
              type="circle"
              :percentage="Number(10)"
              color="#0193ff"
              :width="130"
              :stroke-width="6"
              :show-text="false"
            >
              <!-- v-if="Number(reportdata.accuracy)" -->
            </el-progress>
            <div class="progressText">
              <p>正确率</p>
              <h5>0.0%</h5>
            </div>
          </div>
        </div>
        <div class="probablyInfo">
          <div class="item">
            <p>
              <span style="color: #333">20</span>
              题
            </p>
            <p>题库总题数</p>
          </div>
          <div class="item">
            <p><span style="color: #333">65</span>题</p>
            <p>本次答对题目数</p>
          </div>
          <div class="item">
            <p><span style="color: #333">12</span>题</p>
            <p>本次做题总数目</p>
          </div>
          <div class="item">
            <p>
              <span style="color: #333">00秒</span>
            </p>
            <p>本次答题用时</p>
          </div>
        </div>
      </div>
    </div>

    <div class="answerIntd">
      <div class="top">
        <!-- <p :class="{ act: chooseId == 1 }" @click="chooseId = 1">
          全部题型答题情况
        </p> -->
        <p :class="{ act: chooseId == 1 }">各题型答题情况</p>
      </div>

      <div class="tiList">
        <div class="testIntd">
          <p class="true">答对</p>
          <p class="error">答错</p>
          <p class="nodo">未做</p>
        </div>
        <div class="tiType">
          <h5 v-if="chooseId == 2">【单项选择题】</h5>
          <div class="list">
            <p
              :class="{
                false: item.is_true == 0,
                do: item.is_true == 2,
                nodo: item.is_true == -1
              }"
              v-for="(item, index) in 12"
              :key="'testarr' + index"
            >
              {{ index + 1 }}
            </p>
          </div>
        </div>

        <div
          class="tiType"
          v-if="reportdata.case_topic && reportdata.case_topic.length > 0"
        >
          <h5 v-if="chooseId == 2">【案例分析题题】</h5>
          <div class="list">
            <p
              :class="{ false: item.is_true == 0, nodo: item.is_true == -1 }"
              v-for="(item, index) in reportdata.case_topic"
              :key="'case_topic' + index"
            >
              {{ index + 1 }}
            </p>
          </div>
        </div>

        <div
          class="tiType"
          v-if="reportdata.text_topic && reportdata.text_topic.length > 0"
        >
          <h5 v-if="chooseId == 2">【文本题】</h5>
          <div class="list">
            <p
              :class="{ false: item.is_true == 0, nodo: item.is_true == -1 }"
              v-for="(item, index) in reportdata.text_topic"
              :key="'case_topic' + index"
            >
              {{ index + 1 }}
            </p>
          </div>
        </div>
      </div>

      <div class="btns">
        <button @click="toanalsysis()">查看全部解析</button>
        <button @click="tohome()">返回首页</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mockReport',
  data() {
    return {
      reportdata: {},
      chooseId: 1,
      topicarr: []
    }
  },
  created() {},
  methods: {
    toanalsysis() {
      this.$router.push({
        path: 'mockTestAnalysis',
        query: {}
      })
    },
    tohome() {}
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/testReport.scss';
</style>
